<template>
  <div class="setting">
    <template v-if="tabType == 'data'">
      <div class="card">
        <div class="title">样式设置</div>
        <div class="content">
          <el-form-item label="选择样式">
            <el-radio-group class="custom-radio-button" v-model="settingData.data.mode">
              <el-radio-button :label="1">
                <sa-icon icon="sa-shop-decorate-imageBanner-mode-1" />
              </el-radio-button>
              <el-radio-button :label="2">
                <sa-icon icon="sa-shop-decorate-imageBanner-mode-2" />
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="Dot样式">
            <el-radio-group class="custom-radio-button" v-model="settingData.data.indicator">
              <el-radio-button :label="1">
                <sa-icon icon="sa-shop-decorate-imageBanner-indicator-1" />
              </el-radio-button>
              <el-radio-button :label="2">
                <sa-icon icon="sa-shop-decorate-imageBanner-indicator-2" />
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="间距">
            <dc-slider v-model="settingData.data.space"></dc-slider>
          </el-form-item>
          <el-form-item label="是否轮播">
            <el-switch v-model="settingData.data.autoplay" />
          </el-form-item>
          <el-form-item v-if="settingData.data.autoplay" label="时间间隔">
            <el-input v-model="settingData.data.interval">
              <template #append>ms</template>
            </el-input>
          </el-form-item>
        </div>
      </div>
      <dc-list
        v-model="settingData.data.list"
        :itemProp="{ title: '', type: 'image', src: '', poster: '', url: '' }"
      >
        <template #title>图片上传</template>
        <template #listItem="{ element }">
          <el-form-item label="标题">
            <el-input v-model="element.title" placeholder="请输入标题"></el-input>
          </el-form-item>
          <el-form-item label="选择类型">
            <el-radio-group v-model="element.type">
              <el-radio label="image">图片</el-radio>
              <el-radio label="video">视频</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="上传">
            <sa-uploader v-model="element.src" :fileType="element.type"></sa-uploader>
          </el-form-item>
          <el-form-item v-if="element.type == 'video'" label="视频封面">
            <sa-uploader v-model="element.poster" fileType="image"></sa-uploader>
          </el-form-item>
          <el-form-item label="链接">
            <dc-url v-model="element.url"></dc-url>
          </el-form-item>
        </template>
      </dc-list>
    </template>
  </div>
</template>

<script setup>
  import dcList from '../../common/dc-list.vue';
  import dcUrl from '../../common/dc-url.vue';
  import dcSlider from '../../common/dc-slider.vue';

  const props = defineProps(['settingData', 'tabType']);
</script>
